<template>
  <div class="mannggerMain">

    <el-container>
      <el-header>
        <el-card>
          <el-breadcrumb separator="/" :key="new Date().getTime()">
            <el-breadcrumb-item v-for="(item,index) in breadcrumb" :key="index" :to="{ path: item.path}">
              {{item.meta.title}}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </el-card>
      </el-header>
      <el-main>
        <el-card><router-view></router-view></el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "mannggerMain",
  data(){
    return{
      routerName:null,
      routerDir:null
    }
  },
  computed:{
    // 面包屑数据
    breadcrumb(){
      // 根据路由配置meta中的showInbreadcrumb字段过滤
      let matchedArr = this.$route.matched.filter((item)=>{
            return item.meta.showInbreadcrumb
          }
      );
      // 因为首页比较特殊，必须一直显示在面包屑第一个，如果没有首页路由信息，手动添加到最前面
      if(matchedArr[0].meta.title !== '首页'){
        matchedArr.unshift(
            {
              path:'/',
              meta:{
                showInbreadcrumb:true,
                title:"首页"
              }
            },
        )
      }
      return matchedArr;
    }
  },
  methods:{

  },
  mounted() {

  }
}
</script>

<style scoped>
*{
  margin:0;
  padding: 0;
}
</style>